<template>
  <view class="UploadImg">
    <view class="img-view">
      <image :src="imgUrl"></image>
      <view class="btn" @click="upload">更换封面</view>
    </view>
    <view class="desc">建议尺寸350*116，图片大小15kb以内</view>
  </view>
</template>


<script>
import {uploadUpgPracticeImage} from "@/improve/services";
export default {
  name: "UploadImg",
  props: {
    imgUrl: {
      type: String,
      default: ""
    }
  },
  // data() {
  //   return {
  //     imgUrl: "https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/cover.jpg",
  //   }
  // },
  methods: {
    upload() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: async (res) => {
          this.imgUrl = res.tempFilePaths[0]
          const base64 = await this.toBase64();
          const fileName = this.imgUrl.split('/').pop(); // 从路径中提取文件名
          const filRes = await uploadUpgPracticeImage({fileName, base64})
          this.$emit("updateImgPath", filRes)
        }
      });
    },
    async toBase64() {
      const fs = uni.getFileSystemManager(); // 获取文件系统管理器
      try {
        // 使用Promise包装fs.readFile操作
        return await new Promise((resolve, reject) => {
          fs.readFile({
            filePath: this.imgUrl, // 图片路径
            encoding: 'base64', // 指定编码格式为Base64
            success: (res) => {
              const mimeType = this.getMimeType( this.imgUrl);
              const base64Data = `data:${mimeType};base64,${res.data}`;
              resolve(base64Data);
            },
            fail: (err) => {
              reject(err);
            }
          });
        });
      } catch (err) {
        return "";
      }
    },
    // 根据文件扩展名获取 MIME 类型
    getMimeType(filePath) {
      const extension = filePath.split('.').pop().toLowerCase();
      switch (extension) {
        case 'jpg':
        case 'jpeg':
          return 'image/jpeg';
        case 'png':
          return 'image/png';
        case 'gif':
          return 'image/gif';
        case 'bmp':
          return 'image/bmp';
        case 'webp':
          return 'image/webp';
        default:
          return 'application/octet-stream'; // 默认类型
      }
    },
    updateImgUrl(url) {
      this.imgUrl = url;
    }
  }
}
</script>


<style scoped lang="scss">
.UploadImg {
  padding: 15px 20px 8px 20px;
  border-radius: 12px;
  background-color: #FFFFFF;
  margin-top: 10px;

  .img-view {
    position: relative;

    image {
      width: 100%;
      height: 116px;
      border-radius: 4px;
    }
  }

  .btn {
    background-color: #00000080;
    color: #FFFFFF;
    width: 80px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    position: absolute;
    border-radius: 12px;
    font-size: 14px;
    margin-right: 14px;
    margin-bottom: 17px;
    right: 0;
    bottom: 0;
  }

  .desc {
    color: #666666;
    font-size: 12px;
    margin-top: 9px;
  }
}
</style>